<template>
  <ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
  <a-modal
    :footer="null"
    centered
    @ok="ModalShow = false"
    bordered
    title="验证码"
    v-model:open="ModalShow"
  >
    <a-form :model="CaptchaForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
      <a-form-item :label="t('sys.log.verificat')">
        <div style="display: flex; align-items: center">
          <a-image width="200px" height="50px" :src="imageCapChart" />
          <a-button
            style="height: 50px; border-top-left-radius: 0; border-bottom-left-radius: 0"
            type="primary"
            >{{ count }}</a-button
          >
        </div>
      </a-form-item>
      <a-form-item label="输入验证码">
        <a-input v-model:value="CaptchaForm.value1" />
      </a-form-item>
    </a-form>
    <div style="display: flex; justify-content: center; width: 100%">
      <a-space>
        <a-button @click="cancelClcik">取消</a-button>
        <a-button @click="commitClcik" type="primary">
          {{ t('sys.configuration.confirm') }}
        </a-button>
      </a-space>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
  import { AppProvider } from '@/components/Application';
  import { useTitle } from '@/hooks/web/useTitle';
  import { useLocale } from '@/locales/useLocale';
  import { ConfigProvider } from 'ant-design-vue';
  import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
  import 'dayjs/locale/zh-cn';
  import { useWebSocketStore } from '@/store/modules/websocket';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  // support Multi-language
  const { getAntdLocale } = useLocale();
  const ModalShow = ref(false);

  const { isDark, darkTheme } = useDarkModeTheme();
  const count = ref(60);
  const CaptchaForm = ref({});
  const imageCapChart = ref();
  const init = () => {
    if (localStorage.getItem('CapChartShow') && localStorage.getItem('CapChartShow') == 1) {
      ModalShow.value = true;
    } else {
      localStorage.setItem('CapChartShow', 0);
    }
    imageCapChart.value = 'https://pic3.zhimg.com/v2-17a03b9627aa8f850628c14550a0544a_r.jpg';
    count.value--;
    if (count.value == 0) {
      count.value = 60;
      ModalShow.value = false;
      // ModalShow.value = false;
    }
  };
  const cancelClcik = () => {
    ModalShow.value = false;
  };
  watch(
    () => ModalShow.value,
    (schemas) => {
      if (schemas == true) {
        count.value = 60;
      }
    },
  );
  setInterval(init, 1000);
  const themeConfig = computed(() =>
    Object.assign(
      {
        token: {
          colorPrimary: '#0960bd',
          colorSuccess: '#55D187',
          colorWarning: '#EFBD47',
          colorError: '#ED6F6F',
          colorInfo: '#0960bd',
        },
      },
      isDark.value ? darkTheme : {},
    ),
  );

  // Listening to page changes and dynamically changing site titles
  useTitle();

  // WebSocket 相关逻辑

  const webSocketStore = useWebSocketStore();
  let socket: WebSocket | null = null;

  const connectWebSocket = () => {
    socket = new WebSocket('ws:121.199.45.111:18008/ws');

    socket.onopen = () => {
      console.log('WebSocket connected');
    };

    socket.onmessage = (event) => {
      console.log('WebSocket message received:', event.data);

      // 处理接收到的消息
      webSocketStore.addRecord(event.data);
    };

    socket.onclose = () => {
      console.log('WebSocket closed');
    };

    socket.onerror = (error) => {
      console.error('WebSocket error:', error);
    };
  };

  const disconnectWebSocket = () => {
    if (socket) {
      socket.close();
      socket = null;
      console.log('WebSocket disconnected');
    }
  };

  onMounted(() => {
    connectWebSocket();
  });

  onUnmounted(() => {
    disconnectWebSocket();
  });
</script>

<style>
  /* .ant-table-row:hover td {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  } */
  .ant-picker {
    width: 100% !important;
  }

  .ant-popover {
    z-index: 9999;
  }
</style>
